<template>
	<Layout :styleObj='{height: "100%", background: "transparent"}'>
        <TodoHeader :pid="id"></TodoHeader>
        <Layout class="c-layout-has-sider" :styleObj='{background: "transparent"}'>
            <Layout :styleObj='{padding: 0, margin: 0, minHeight: 280, background: "transparent"}'>
                <Content :styleObj='{ background: "transparent"}'>
                    <div class="box-container">
                        <div v-if="lists.length">
                            <TodoItem v-for="list in lists" :key={list} :uuid="list.uuid" :pid="id"></TodoItem>
                        </div>
                        <EmptyMessage v-else />
                    </div>
                </Content>
            </Layout>
        </Layout>
    </Layout>
</template>

<script>
import { add, detory } from "@store";
import { addList, updateList, removeList } from "@project/todo/business/data";

export default {
    name: "app",
    data(){
        return {
            lists: [],
            id: "todo"
        };
    },
    mounted(){
        const id = this.id;
        add(id, 'addList', item => {
            this.lists = addList(this.lists, item);
        })

        add(id, 'updateList', data => {
            this.lists = updateList(this.lists, data)
        })

        add(id, 'removeList', data => {
            this.lists = removeList(this.lists, data)
        })
    }
}
</script>

<style>
@import "@static/todo/index.less";
</style>